---
type: tutorial
title: RSS 피드 추가
description: >-
  튜토리얼: 첫 번째 Astro 블로그 구축 — 독자가 구독할 수 있는 피드를 생성하기 위한 Astro의 공식 패키지를 설치하세요.
i18nReady: true
---

import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - 웹 사이트에 대한 RSS 피드를 생성하기 위한 Astro 패키지를 설치
  - RSS 피드 리더가 구독하고 읽을 수 있는 피드 생성
</PreCheck>

## Astro의 RSS 패키지 설치

Astro는 여러분의 웹사이트에 RSS 피드를 신속하게 추가할 수 있는 맞춤형 패키지를 제공합니다.

이 공식 패키지는 Feedly, The Old Reader 등과 같은 **피드 리더**가 읽을 수 있는 모든 블로그 게시물에 대한 정보가 포함된 비 HTML 문서를 생성합니다. 이 문서는 사이트가 재빌드될 때마다 업데이트됩니다.

개인은 피드 리더에서 피드를 구독할 수 있으며 사이트에 새 블로그 게시물을 게시하면 알림을 받을 수 있으므로 인기 있는 블로그 기능이 됩니다.

<Steps>
1. 터미널에서 Astro 개발 서버를 종료하고 (<kbd>Ctrl + C</kbd>) 다음 명령을 실행하여 Astro의 RSS 패키지를 설치합니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @astrojs/rss
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @astrojs/rss
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @astrojs/rss
      ```
      </Fragment>
    </PackageManagerTabs>

2. Astro 프로젝트 작업을 다시 시작하려면 개발 서버를 다시 시작하세요.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

## `.xml` 피드 문서 만들기

<Steps>
1. `rss.xml.js`라는 새 파일을 `src/pages/`에 만듭니다.

2. 다음 코드를 이 새 문서에 복사합니다. `title` 및 `description` 속성을 맞춤설정하고, 필요한 경우 `customData`에 다른 언어를 지정하세요.

    ```js title="src/pages/rss.xml.js"

    import rss, { pagesGlobToRssItems } from '@astrojs/rss';

    export async function GET(context) {
      return rss({
        title: 'Astro Learner | Blog',
        description: 'My journey learning Astro',
        site: context.site,
        items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
        customData: `<language>en-us</language>`,
      });
    }
    ```

3. 사이트 고유의 Netlify URL을 사용하여 Astro 구성에 `site` 속성을 추가하세요.

    ```js title="astro.config.mjs" ins={4}
    import { defineConfig } from "astro/config";

    export default defineConfig({
      site: "https://example.com"
    });
    ```

4. `http://localhost:4321/rss.xml`을 방문하여 각 `.md` 파일에 대한 `item`이 포함된 페이지에서 (형식화되지 않은) 텍스트를 볼 수 있는지 확인하세요. 각 항목에는 `title`, `url`, `description`과 같은 블로그 게시물 정보가 포함되어야 합니다.

    :::tip[리더에서 RSS 피드 보기]
    피드 리더를 다운로드하거나 온라인 피드 리더 서비스에 가입하고 Netlify URL을 추가하여 사이트를 구독하세요. 또한 이 링크를 다른 사람들과 공유하여 다른 사람들이 여러분의 게시물을 구독하고 새 게시물이 게시되면 알림을 받을 수 있도록 할 수 있습니다.
    :::

</Steps>

<Box icon="check-list">

## 체크리스트

<Checklist>
- [ ] 명령줄을 사용하여 Astro 패키지를 설치할 수 있습니다.
- [ ] 내 웹사이트에 대한 RSS 피드를 만들 수 있습니다.
</Checklist>
</Box>

### 참고 자료

- [Astro에서 RSS 항목 생성](/ko/recipes/rss/#glob-imports-사용하기)
